<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
    <h3 class="modal-title">{{'APP_NEW_MEMBER' | translate}}</h3>
    <div class="modal-body">
        <form #memberForm="ngForm" class="clr-form clr-form-horizontal">
            <div class="clr-form-control">
                <label class="required clr-control-label">{{'APP_NAME' | translate}}</label>
                <div class="clr-control-container">
                    <div class="clr-input-wrapper" (mouseleave)="leaveInput()">
                        <input class="clr-input" type="text" id="member_name" [(ngModel)]="item.userName"
                               name="member_name"
                               size="20"
                               #memberName="ngModel"
                               required
                               (keyup)="handleValidation()" autocomplete="off">
                        <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                        <!--                        <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>-->
                        <div class="selectBox" [style.display]="selectUsers.length ? 'block' : 'none'"
                             *ngIf="selectUsers.length > 0 ">
                            <ul>
                                <li *ngFor="let name of selectUsers"
                                    (click)="selectedName(name)">{{name }}</li>
                            </ul>
                        </div>
                    </div>
                    <span class="clr-subtext">{{'APP_PROJECT_MEMBER_HELPER'|translate}}</span>
                </div>
            </div>
            <div class="clr-form-control">
                <clr-select-container>
                    <label>{{"APP_ROLE"|translate}}</label>
                    <select clrSelect [(ngModel)]="item.role" name="role" required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let item of roles" [value]="item">{{item|translate}}</option>
                    </select>
                </clr-select-container>
            </div>
            <app-modal-alert></app-modal-alert>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'APP_CANCEL' | translate}}</button>
        <button type="button" class="btn btn-primary" [disabled]="memberForm.invalid"
                (click)="onSubmit()">{{'APP_COMMIT' | translate}}</button>
    </div>
</clr-modal>
